<template>
  <div class="app-container">
    <el-row :gutter="10">
      <fold :span="5" :xs="24" :show.sync='sideshow'>
        <el-card shadow="never">
          <org-tree ref="orgTree" modelType="'dept','community'" @nodeClick="handleNodeClick" @firstNodeClick="handleNodeClick"/>
        </el-card>
      </fold>
      <el-col :span="sideshow ? 19 : 24" :xs="24">
  <el-card shadow="never">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" label-width="68px" class="form-flex">
        <el-row :gutter="20">
            <el-col :span="6" :xs="24">
              <el-form-item label="交班人" prop="handPerson">
                    <el-input
                      v-model="queryParams.handPerson"
                      placeholder="请输入交班人"
                      clearable
                      size="small"
                      @keyup.enter.native="handleQuery"/>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24">
              <el-form-item label="交班日期" prop="handTime">
                    <el-date-picker clearable size="small"
                      v-model="queryParams.handTime"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择交班日期">
                    </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24">
              <el-form-item label="审核人" prop="auditPerson">
                    <el-input
                      v-model="queryParams.auditPerson"
                      placeholder="请输入审核人"
                      clearable
                      size="small"
                      @keyup.enter.native="handleQuery"/>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24">
              <el-form-item label="审核状态" prop="auditState">
                <el-select v-model="queryParams.auditState" placeholder="请选择审核状态" clearable size="small">
                  <el-option
                    v-for="item in dict.audit_state"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24">
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['payfee:HandRecord:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['payfee:HandRecord:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['payfee:HandRecord:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport" v-hasPermi="['payfee:HandRecord:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="HandRecordList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="交班单号" align="center"  prop="handNo" >
            <template slot-scope="scope">
              <el-link type="primary" @click="handleView(scope.row)">{{scope.row.handNo}}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="交班人" align="center" prop="handPerson" />
          <el-table-column label="交班日期" align="center" prop="handTime" width="180"/>
          <el-table-column label="交班区间" align="center" prop="newHandSection" show-overflow-tooltip/>
          <el-table-column label="交班金额" align="center" prop="handMoney" />
          <el-table-column label="审核人" align="center" prop="auditPerson" />
          <el-table-column label="审核状态" align="center" prop="auditState" >
            <template slot-scope="scope">
                {{ dict.label.audit_state[scope.row.auditState] }}
            </template>
          </el-table-column>
          <el-table-column label="审核时间" align="center" prop="auditTime" width="180"/>
          <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                v-if="scope.row.auditPerson==$store.state.user.nickName && scope.row.auditState=='10'"
                @click="handleApprove(scope.row)"
                v-hasPermi="['payfee:HandRecord:approve']"
              >审核</el-button>
            </template>
          </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
      </el-card>
      </el-col>
    </el-row>
      <HandRecordForm ref="formRef" @cancel="getList" :currentNode="currentNode"/>
  </div>
</template>

<script>

import { listMixin } from "@/utils/mixins/listMixin";
import { listHandRecord, delHandRecord, exportHandRecord,approve } from "@/api/payfee/HandRecord";
import HandRecordForm from "./form.vue"

export default {
  name: "HandRecord",
  components:{ HandRecordForm },
  mixins:[ listMixin ],
  dicts: [   'audit_state',   ],
  data() {
    return {
      // 交班管理表格数据
      HandRecordList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        communityId: null,
        handNo: null,
        handPerson: null,
        handTime: null,
        handSection: null,
        handMoney: null,
        auditPerson: null,
        auditState: null,
        auditTime: null,
        nodeId: null,
      },
      currentNode:null
    };
  },
  created() {
  },
  methods: {
    handleNodeClick(node) {
      this.currentNode = node;
      this.queryParams.nodeId = node.id
      this.getList()
    },
    /** 查询交班管理列表 */
    getList() {
      this.loading = true;
      listHandRecord(this.queryParams).then(response => {
        let HandRecordList = response.rows
        HandRecordList.forEach(row=>{
          if(row.handSection){
            let handSection = JSON.parse(row.handSection)
            if(handSection.length > 0){
              row['newHandSection'] = `${handSection[0]}~${handSection[1]}`
            }
          }
        })
        this.HandRecordList = HandRecordList
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
      this.selection = selection
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$refs.formRef.show({"type":"ADD"});
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      let yshList = this.selection.filter(row=>row.auditState != '10')
      if(yshList.length > 0){
        let nos = yshList.map(item => item.handNo)
        this.msgWarning("交班单号["+nos+"]不是待审核状态,不能修改。")
        return false;
      }
      const id = row.id || this.ids
      const option = {
          "type":"UPDATE",
          "id": id
      }
      this.$refs.formRef.show(option);
    },
    handleView(row){
      const id = row.id || this.ids
      const option = {
        "type":"VIEW",
        "id": id
      }
      this.$refs.formRef.show(option);
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      let yshList = this.selection.filter(row=>row.auditState != '10')
      if(yshList.length > 0){
        let nos = yshList.map(item => item.handNo)
        this.msgWarning("交班单号["+nos+"]不是待审核状态,不能删除。")
        return false;
      }
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除交班编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delHandRecord(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有交班管理数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportHandRecord(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
    },
    handleApprove(row){
      const ids = row.id || this.ids;
      const no = row.handNo;
      this.$confirm('是否确认审核'+no+'交班单', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return approve({id:ids});
      }).then(() => {
        this.getList();
        this.msgSuccess("审核成功");
      })
    }
  }
};
</script>
